{% extends "base.html" %}

{% block content %}
<div class="row">
    <!-- 快捷入口和储蓄目标并排显示 -->
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">快速记账</h5>
                <form action="{{ url_for('quick_transaction') }}" method="POST">
                    <div class="mb-3">
                        <label class="form-label">金额</label>
                        <input type="number" step="0.01" class="form-control" name="amount" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">类型</label>
                        <select class="form-select" name="type" id="transaction-type" required>
                            <option value="income">收入</option>
                            <option value="expense">支出</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">分类</label>
                        <select class="form-select" id="quick-category" name="category_id" required>
                            {% for category in categories if category.type == 'expense' %}
                            <option value="{{ category.id }}">{{ category.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">描述</label>
                        <input type="text" class="form-control" name="description">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">日期</label>
                        <input type="date" class="form-control" name="date" value="{{ current_date }}" required>
                    </div>
                    <button type="submit" class="btn btn-primary">记录</button>
                </form>
            </div>
        </div>
    </div>
    <!-- 储蓄目标模块，右侧 -->
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title text-center">储蓄目标</h5>
                <div class="row justify-content-center">
                    {% for goal in savings_goals %}
                    <div class="col-md-12 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-title">{{ goal.name }}</h6>
                                <p class="card-text">
                                    目标金额: ¥{{ "%.2f"|format(goal.target_amount) }}<br>
                                    当前进度: ¥{{ "%.2f"|format(goal.current_amount) }}
                                </p>
                                <div class="d-flex justify-content-center">
                                    <div class="progress w-100" style="max-width: 95%;">
                                        <div class="progress-bar" 
                                             role="progressbar" 
                                             style="width: {{ (goal.current_amount / goal.target_amount * 100)|round(2) }}%">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <!-- 核心数据总览 -->
    <div class="col-md-12 mt-4">
        <div class="row">
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title">当前余额</h5>
                        <h2>¥{{ "%.2f"|format(current_balance) }}</h2>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title">本月收入</h5>
                        <h2>¥{{ "%.2f"|format(total_income) }}</h2>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title">本月支出</h5>
                        <h2>¥{{ "%.2f"|format(total_expenses) }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

        <!-- 收入折线图 -->
        <div class="card mb-4">
            <div class="card-body">
                <div id="income-line-chart">{{ income_line_chart|safe }}</div>
            </div>
        </div>
        <!-- 支出折线图 -->
        <div class="card mb-4">
            <div class="card-body">
                <div id="expense-line-chart">{{ expense_line_chart|safe }}</div>
            </div>
        </div>
        <!-- 饼状图 -->
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">本月支出分类</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h6 class="card-title">收入分类</h6>
                                <div class="list-group">
                                    {% for category in categories if category.type == 'income' %}
                                    <div class="list-group-item">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span>{{ category.name }}</span>
                                            <span class="badge bg-primary rounded-pill">收入</span>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h6 class="card-title">支出分类</h6>
                                <div class="list-group">
                                    {% for category in categories if category.type == 'expense' %}
                                    <div class="list-group-item">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span>{{ category.name }}</span>
                                            <span class="badge bg-danger rounded-pill">支出</span>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="pie-chart">{{ pie_chart|safe }}</div>
            </div>
        </div>
    </div>
</div>



<script>
document.addEventListener('DOMContentLoaded', function() {
    const typeSelect = document.getElementById('transaction-type');
    const categorySelect = document.getElementById('quick-category');
    
    // 初始化时设置正确的分类类型
    updateCategories(typeSelect.value);
    
    // 监听类型选择变化
    typeSelect.addEventListener('change', function() {
        updateCategories(this.value);
    });
    
    function updateCategories(transactionType) {
        // 获取当前类型的所有分类
        fetch(`/api/categories?type=${transactionType}`)
            .then(response => response.json())
            .then(data => {
                // 清空当前选项
                categorySelect.innerHTML = '';
                // 添加新的选项
                data.forEach(category => {
                    const option = document.createElement('option');
                    option.value = category.id;
                    option.textContent = category.name;
                    categorySelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error:', error));
    }
});
</script>
{% endblock %}
